<template>
	<view class="my_buy_page">
		
		<puplic-nav titleTxt="我要买" :flag="isFlag" @update:puplicNavHeight='getPuplicNavHeight' />
		
		<view class="re">
			<image src="@/static/images/banner_03.png" class="wp100" mode="widthFix"></image>
		</view>
		
		<view class="buy_content_box">
			
			<view class="area_1">
				<view class="flex_box">
					<view class="mr20 fs0"><image src="@/static/images/banner_01.png" class="img_buy_1"></image></view>
					<view class="item">
						<view class="hp100 df fldc jcsb cor_fff">
							<view class=""><text class="fs48 fwb">238</text><text class="fs24">元</text></view>
							<view class="fs28">塞尔达 荒野之息</view>
							<view class="fs28">非偏远地区满2张顺丰包邮</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="mt32 pl40 pr40 mb32">
				
				<view class="box_buy_1">
					<view class="">裸卡只有卡带本身，没有包装外壳，只玩游戏不收藏的朋友更推荐选择裸卡/简装</view>
				</view>
				
				<view class="sel_list_box">
					
					<view class="item_sel">
						<view class="sel_title">出售包装</view>
						<view class="sel_card_list">
							<view class="current item_sel_card">裸卡简装</view>
							<view class="item_sel_card">正常盒装</view>
						</view>
					</view>
					
					<view class="item_sel">
						<view class="sel_title">出售语言</view>
						<view class="sel_card_list">
							<view class="item_sel_card">裸卡简装</view>
						</view>
					</view>
					
					<view class="item_sel">
						<view class="sel_title">出售版本</view>
						<view class="sel_card_list">
							<view class="item_sel_card">裸卡简装</view>
						</view>
					</view>
					
				</view>
				
				<view class="mt24 flex_box aic">
					<view class="item ov">
						<view class="fs32 fwb cor_000">购买数量</view>
					</view>
					<view class="pedometer_box">
						<view class="add_btn">-</view>
						<view class="ipt_num">1</view>
						<view class="current reduce_btn">+</view>
					</view>
				</view>
				
				<view class="mt48 df jcsb">
					<view class="up_btn_1">加入购物车</view>
					<view class="up_btn_2">直接购买</view>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	import PuplicNav from '@/components/puplicNav/index.vue';
	
	const isFlag = ref(false); //控制自定义导航栏背景色
	
	onPageScroll((e) => {
		if(e.scrollTop >= 80) {
			isFlag.value = true;
		}else {
			isFlag.value = false;
		}
	});
	
</script>

<style lang="scss" scoped>
	
	page { background: #fff;   }

.my_buy_page {
	position: relative;
	padding-bottom: content(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
	.buy_content_box {
		position: relative;
		margin-top: -60rpx;
		.area_1 {
			position: relative;
			padding: 36rpx 40rpx;
			background: linear-gradient(0deg, #FFA299 0%, #F5220F 100%);
			border-radius: 16rpx 16rpx 0 0;
			.img_buy_1 {
				position: relative;
				width: 244rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
		}
		.box_buy_1 {
			position: relative;
			padding: 12rpx 24rpx;
			font-size: 24rpx;
			color: #FF594A;
			background: #FCEDED;
			border-radius: 12rpx;
		}
		.sel_list_box {
			position: relative;
			.item_sel {
				position: relative;
				.sel_title {
					position: relative;
					padding: 24rpx 0;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}
				.sel_card_list {
					position: relative;
					display: flex;
					flex-wrap: wrap;
					margin-left: -32rpx;
					.item_sel_card {
						position: relative;
						width: 216rpx;
						height: 96rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #333;
						background: #fff;
						border-radius: 8rpx;
						border: 2rpx solid #F0F0F0;
						margin-bottom: 24rpx;
						margin-left: 32rpx;
						&.current {
							color: #fff;
							background-color: #F5220F;
							border-color: #F5220F;
						}
					}
				}
			}
		}
	}
}

</style>
